<template>
    <div class="page-container">
        <!-- 顶部标题区 -->
        <div class="container-header">
            <header-title title="电能质量监测" subtitle="三相不平衡监测" @refresh="" :showExportBtn="false" />
        </div>
        <div class="main-content">
            <div class="energy-section">
                <div class="section-header">
                    <h2>监测图</h2>
                    <div class="section-tabs">
                        <el-button type="default" @click="handleExport">
                            导出
                            <svg-icon :icon-class="'export'" size="10"></svg-icon>
                        </el-button>
                    </div>
                </div>
            </div>
            <el-form ref="queryFormRef" :inline="true" label-suffix="：" :model="queryParams" class="query-form" label-width="98px">
                <el-form-item label="">
                    <el-radio-group>
                        <el-radio-button v-for="(item, index) in intervalTabs" :label="item.label" :key="index">{{ item.label }}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择日期">
                    <el-date-picker v-model="queryParams.value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="显示频率">
                    <el-input placeholder="10" style="width: 160px">
                        <el-select slot="append" placeholder="分钟" style="width: 80px">
                            <el-option label="餐厅名" value="1"></el-option>
                            <el-option label="订单号" value="2"></el-option>
                            <el-option label="用户电话" value="3"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleQuery" type="primary" class="search-icon">
                        <svg-icon icon-class="search-icon" />
                        搜索
                    </el-button>
                    <el-button @click="resetQuery" class="reset-icon">
                        <svg-icon icon-class="reset-icon" />
                        重置
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetQuery" class="reset-icon">
                        <svg-icon icon-class="reset-icon" />
                        导出记录
                    </el-button>
                </el-form-item>
            </el-form>
            <QualityMonitoringChart1 />
        </div>

        <div class="main-content">
            <div class="energy-section">
                <div class="section-header">
                    <h2>表格</h2>
                    <div class="section-tabs">
                        <el-button type="default" @click="handleExport">
                            导出
                            <svg-icon :icon-class="'export'" size="10"></svg-icon>
                        </el-button>
                    </div>
                </div>
            </div>
            <div class="content-table">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :header-cell-style="{
                        fontSize: '12px',
                        color: '#606266',
                        textAlign: 'center',
                    }"
                >
                    <el-table-column label="时间" align="center" prop="alertName" />
                    <el-table-column label="尖期" align="center" prop="serialNumber" />
                    <el-table-column label="峰期" align="center" prop="serialNumber" />
                    <el-table-column label="平期" align="center" prop="serialNumber" />
                    <el-table-column label="谷期" align="center" prop="deviceName" />
                </el-table>

                <div class="table-pagination">
                    <el-pagination
                        :current-page="pagination.currPage"
                        :page-size="pagination.pageSize"
                        :page-sizes="pagination.pageSizes"
                        :total="pagination.totalPage"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TimeTabs from '@/components/TimeTabs/index.vue';
import HeaderTitle from '@/components/headerTitle/index.vue';
import QualityMonitoringChart1 from '@/components/QualityMonitoringChart1/index.vue';

export default {
    components: { QualityMonitoringChart1, HeaderTitle, TimeTabs },
    data() {
        return {
            tabs: [
                { key: 'today', label: '部门对比' },
                { key: 'month', label: '区域对比' },
                { key: 'quarter', label: '设备对比' },
            ],
            intervalTabs: [
                { key: 'today', label: '今天' },
                { key: 'month', label: '7天' },
                { key: 'month', label: '30天' },
                { key: 'month', label: '60天' },
            ],
            compareTabs: [
                { key: 'today', label: '同比' },
                { key: 'month', label: '环比' },
            ],
            iconTabs: [
                { key: 'today', svg: 'icons1' },
                { key: 'month', svg: 'icons2' },
                { key: 'year', svg: 'icons3' },
            ],
            valleyData: [
                { key: 'today', label: '尖期' },
                { key: 'month', label: '峰期' },
                { key: 'quarter', label: '平期' },
                { key: 'quarter2', label: '谷期' },
            ],
            queryParams: {},
            statisticsCards: [
                { color: '#FFAD1E', label: '总用电费用' },
                { color: '#F9744F', label: '去年同期费用' },
                { color: '#1EC7FF', label: '总用电量' },
                { color: '#13C998', label: '去年同期用电量' },
            ],
            queryTable: {},
            tableData: [],
            pagination: {
                pageSize: 10,
                currPage: 1,
                totalPage: 0,
                pageSizes: [10, 20, 30],
            },
        };
    },
    methods: {
        handleQuery() {},
        resetQuery() {},
        handleSizeChange() {},
        handleCurrentChange() {},
    },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
